<template>
    <div style="width: 100px;height: 50px;background: yellow">
        parent:{{count}}
        <button @click="tochild()">tochild</button>
        <br>
        <button @click="isShow = !isShow">unmount conn</button>
    </div>
    <!--v-show=display, v-if=销毁, 数据没有了, 而且下面那个事件会报错，感觉还是v-show好点，keep-alive数据缓存了-->
    <keep-alive>
        <my-conn v-if="isShow" ref="one" @mycountevent="changeCount"></my-conn>
    </keep-alive>
    <!--    <my-conn v-show="isShow" ref="one" @mycountevent="changeCount"></my-conn>-->
    <my-conn ref="two" @mycountevent="changeCount" :article="article"></my-conn>
    {{msg}}
    {{show()}}
    <br>
    <h1>{{title}}</h1>
    <span v-for="(item,i) in article">{{item}}</span>
</template>

<script>
    import MyConn from "./chlidsComp/MyConn";

    export default {
        name: "MyMain",
        props: {
            msg: {type: String, default: "###"},
            title: {type: String, required: true},
            article: {type: Array}
        },
        data() {
            return {
                msg1: 'worrrrri',
                count: 0,
                isShow: true
            }
        },
        components: {
            MyConn
        },
        methods: {
            show() {
                return this.msg + this.msg1;
            },
            changeCount(num) {
                this.count += num;
            },
            change() {
                this.count++;
            },
            tochild() {
                this.$refs.one.changeNum();
                this.$refs.two.changeNum();
            }
        }
    }
</script>

<style scoped>

</style>